<template>
  <div class="login">
    <div class="login-type-wrap" v-if="currentShow==='loginType'">
      <div class="main-type">
        <div class="logo">
          <img src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" alt="">
        </div>
        <div class="btn">
          <a class="phone-btn"><i class="iconfont">&#xeb4d;</i>手机号快捷登录</a>
          <a class="email-btn" @click="togglePage"><i class="iconfont">&#xe623;</i>邮箱账号登录</a>
        </div>
      </div>
      <div class="other-type">
        <ul>
          <li><a><i class="iconfont">&#xe61a;</i>微信</a></li>
          <li><a><i class="iconfont">&#xe609;</i>QQ</a></li>
          <li class="last"><a><i class="iconfont">&#xe619;</i>微博</a></li>
        </ul>
      </div>
    </div>
    <div class="login-wrap" v-else-if="currentShow==='login'">
      <div class="logo">
        <img src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png" alt="">
      </div>
      <van-form action="" @submit="onSubmit">
        <van-field
          v-model="email"
          type="email"
          name="邮箱账号"
          placeholder="邮箱账号"
          clearable
          clear-trigger="always"
          border
          :style="{ marginBottom: '10px' }"
          :rules="[{ required: true, message: '请填写邮箱', trigger: 'onChange'}]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          placeholder="密码"
          clearable
          clear-trigger="always"
          border
          :rules="[{ required: true, message: '请填写密码', trigger: 'onChange'}]"
        />
        <p class="unlogin">
          <a href="" class="regist">注册账号</a>
          <a href="" class="forgetpwd">忘记密码</a>
        </p>
        <div class="submit">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
      <div class="other-type">
        <span @click="togglePage">其他登录方式<i class="iconfont">&#xe642;</i></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      email: '',
      password: '',
      currentShow: 'loginType',
    }
  },
  methods: {
    togglePage() {
      if (this.currentShow === 'loginType') {
        this.currentShow = 'login'
      } else if (this.currentShow === 'login') {
        this.currentShow = 'loginType'
      }
    },
    onSubmit(values) {
      console.log(values)
    },
  },
}
</script>

<style lang="less">
@font-face {
  font-family: 'iconfont';  /* Project id 2893355 */
  src: url('//at.alicdn.com/t/font_2893355_wu63h7yb0or.woff2?t=1635235664718') format('woff2'),
       url('//at.alicdn.com/t/font_2893355_wu63h7yb0or.woff?t=1635235664718') format('woff'),
       url('//at.alicdn.com/t/font_2893355_wu63h7yb0or.ttf?t=1635235664718') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
.login{
  position: relative;
  width: 100%;
  height: 100%;
  .login-type-wrap{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #f2f5f4;
    .main-type{
      padding-top: 80px;
      .logo{
        text-align: center;
        img{
          width: 134px;
          height: 45px;
          vertical-align: top;
        }
      }
      .btn{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 40px;
        a{
          display: block;
          width: 340px;
          height: 47px;
          text-align: center;
          font-size: 14px;
          line-height: 47px;
          border-radius: 5px;
          i{
            margin-right: 5px;
            font-size: 20px;
            vertical-align: top;
          }
        }
        a.phone-btn{
          color: #fff;
          background-color: #DD1A21;
          margin-bottom: 15px;
        }
        a.email-btn{
          color: #DD1A21;
          border: 1px solid #DD1A21;
        }
      }
    }
    .other-type{
      position: absolute;
      bottom: 30px;
      left: 0;
      right: 0;
      margin: auto;
      ul{
        display: flex;
        justify-content: center;
        align-items: center;
        .last{
          border: none;
        }
        li{
          padding: 0 20px;
          border-right: 1px solid #7f7f7f;
          height: 20px;
          a{
            font-size: 14px;
            color: #7f7f7f;
            vertical-align: top;
            i{
              margin-right: 5px;
              font-size: 18px;
              vertical-align: top;
            }
          }
        }
      }
    }
  }
  .login-wrap{
    height: 100%;
    overflow: hidden;
    display: block;
    .logo{
      text-align: center;
      margin-top: 28px;
      img{
        width: 134px;
        height: 45px;
        vertical-align: top;
      }
    }
    form{
      margin-top: 20px;
      padding-top: 57px;
      p.unlogin{
        overflow: hidden;
        margin: 0;
        font-size: 12px;
        padding: 20px 16px 0;
        a{
          display: block;
          color: #666;
        }
        a.regist{
          float: left;
        }
        a.forgetpwd{
          float: right;
        }
      }
      .submit{
        padding: 20px 16px 0;
        Button{
          display: block;
          width: 100%;
          height: 45px;
          outline: none;
          border: none;
          font-size: 14px;
          margin: 0;
          padding: 0;
          background-color: #DD1A21;
          color: #fff;
          border-radius: 5px;
        }
      }
    }
    .other-type{
      padding: 0 16px;
      font-size: 14px;
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>
